<!DOCTYPE html>
<html lang="en-GB" dir="ltr">
    <head>
		<title>jQuery Video Background plugin</title>
		<meta charset="utf-8">
		<link href="themes/ui-darkness/jquery-ui-1.8.12.custom.css" rel="stylesheet" media="screen">
		<link href="themes/jquery.videobackground.css" rel="stylesheet" media="screen">
		<style>
			/*
			 * Page specific styling.
			 *
			 */
			body {
				margin: 0;
				font-family: arial, helvetica, sans-serif;
			}
			a {
				color: #FFF;
			}
			h2 {
				font-size: 20px;
				font-weight: normal;
			}
			li {
				list-style: none;
			}
			dl {

			}
			dt {
				float: left;
				width: 160px;
			}
			dd {
				margin: 0 0 10px 160px;
			}
			/*
			 * If developing a full page background the styles from .video-background will be required.
			 * The classname itself is unimportant.
			 *
			 */
			.video-background {
				position: absolute;
				top: 0;
				left: 0;
				overflow: hidden;
				width: 100%;
				height: 100%;
				z-index: 0;
			}
			.video-background video {
				min-height: 100%; 
				min-width:100%; 
			}
			#page {
				position: relative; 
				z-index: 1;
				width: 960px;
				color: #FFF;
				background: transparent url(themes/background.png) repeat top left;
				border-radius: 5px;
				margin: 0 auto;
			}
			#main {
				padding: 10px;
				margin: 10px 0;
			}
		</style>
		<script src="external/jquery.js"></script>
		<script src="script/jquery.videobackground.js"></script>
		<script>
			$(document).ready(function() {
				$('dl').toggle();
				$('h2').bind('click', function(event) {
					event.preventDefault();
					$(this).next('dl').slideToggle(500, function() {
						$('.video-background').videobackground('resize');
					});
				});
				$('body').prepend('<div class="video-background"></div>');
				$('.video-background').videobackground({
					videoSource: [['video/beach.mp4', 'video/mp4'],
					['video/beach.webm', 'video/webm']],
					controlPosition: '#main',
					poster: 'video/big-buck-bunny.jpg',
					loadedCallback: function() {
						$(this).videobackground('mute');
					}
				});
			});
		</script>
    </head>
    <body>	
		<div id="page">
			<div id="page-group">
				<div id="header" class="header" role="banner" ></div>
				<div id="content">
					<div id="main" role="main">
						<h1>jQuery Video Background plugin</h1>
				</div>
			</div>
			<div id="footer" class="footer" role="contentinfo"></div>
		</div>
    </body>
</html>